<template>
	<view class="container">
		<view class="banner">
			<text>欢迎登录</text>
			<image src="../../static/user/banner.png" mode=""></image>
		</view> 
		
		<view class="login_box">
			<view class="box">
				<view class="box_title">
					<text>账号登录</text>
					<view class="bar">
						
					</view>
				</view>
				
				<view class="box_input">
					<uni-forms>
						<view class="input_user">
							<input type="text" value="" v-model="loginForm.username" placeholder="请输入账号" placeholder-class="userInputplaceholder"/>
						</view>
						
						<view class="input_psw">
							<input type="text" value="" v-model="loginForm.password" placeholder="请输入密码" placeholder-class="userInputplaceholder"/>
						</view>
					</uni-forms>
				</view>
				
				
				
				<view class="btn_box">
					<button @click="Onlogin" class="btnCla " style="background-color: #79b2fe;color: #FFFFFF;font-weight: 700;">登录</button>
				</view>
				
				
				<view class="yy">
					
						
						<view class="">
							<evan-checkbox primary-color="#307ffe" :icon-size="13" shape="square" v-model="checked">
								我已阅读<text @click.stop="">《服务协议》</text>和<text @click.stop="">《隐私政策》</text></evan-checkbox>
						</view>
					
					
				</view>
				
				
			</view>
			
			<view class="goReg">
				<navigator url="/pages/register/register"><text>暂无账号?去注册</text></navigator>
				<navigator url=""><text @click="vk.toast('暂未开放')">忘记密码？</text></navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from "@/api/login.js"
	
	var that;// 当前页面对象
	var vk; //vk依赖
	export default {
		data() {
			return {
				loginForm:{	
					password: '',
					username:'',
				},
				checked:false,
				
			}
		},
		onLoad(options) {
			that = this;
			vk = that.vk
			that.options = options
			
			this.loginForm.password = vk.getVuex('$user.userInfo.password')
			this.loginForm.username = vk.getVuex('$user.userInfo.username')
			this.checked = vk.getVuex('$app.fy')
		},
		onReady() {
		
		},
		methods: {
			fy(e){
				
			},
			change(e){
				
			},
			Onlogin(){
				
				if(!(this.loginForm.password  && this.loginForm.username )){
					vk.toast('请输入账号密码','none')
					return
				}
				if(!this.checked){
					vk.toast('请勾选已阅读《服务协议》和《隐私政策》','none');
					return
				}
				vk.setVuex('$user.userInfo',this.loginForm)
				vk.setVuex('$app.fy',true)
				login(this.loginForm).then((data)=>{
					let [ err, res ] = data
					if(res.data.code == 200){
						// 重置本地缓存
						let stuId = vk.getStorageSync('stuId');
						
						if(stuId != this.loginForm.username){
							vk.setVuex('$app.isKunnan',false)
							vk.setVuex('$app.catchUpload',false)
							vk.setVuex('$app.isCatch',false)
							vk.setVuex('$app.autographStu',false)
							vk.setVuex('$app.isSubmit',false)
							vk.setVuex('$app.isEdit',true)
							vk.setVuex('$app.catchData',{})
							vk.removeStorageSync('uploadList');     
							vk.removeStorageSync('kunnan_info');
						}
						
						
						// 持久化存储
						vk.setStorageSync('stuId',this.loginForm.username);
						uni.setStorageSync('stuToken',res.data.token)
						vk.toast('登录成功','success',800);
						
						setTimeout(()=>{
							vk.redirectTo('/pages/index/index');
						},850)
					}
					else {
						vk.alert(res.data.msg || err);
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		
		.banner {
			position: relative;
			height: 680rpx;
			text {
				position:absolute;
				top: 25%;
				left: 8%;
				z-index: 2;
				font-size: 60rpx;
				font-weight: 700;
				color: #ffffff;
			}
			image {
				position:absolute;
				z-index:1;
				width: 750rpx;
				height: 675rpx;
			}
		}
		
		.login_box {
			position: relative;
			z-index: 2;
			padding: 40rpx;
			.box {
				margin-top: -220rpx;
				padding: 20rpx;
				// height: 635rpx;
				border: .5px solid #e7f0fb;
				background-color: #ffffff;
				border-radius: 40rpx;
				box-shadow: 1px 2px 10px #eeeeee;
				.box_title {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #1578fe;
					font-weight: 700;
					.bar {
						margin-top: 8rpx;
						width: 26rpx;
						height: 8rpx;
						background-color: #1678fd;
						border-radius: 8rpx;
					}
				}
				.box_input {
					
					padding: 10rpx 15rpx;
					.input_user {
						margin-top: 40rpx;
						padding: 0 40rpx;
						height: 85rpx;
						background-color: #deecff;
						border-radius: 18rpx;
						input {
							height: 100%;
						}
						.userInputplaceholder {
							color: #70a5ed;
							font-weight: 700;
						}
					}
					.input_psw {
						margin-top: 40rpx;
						padding: 0 40rpx;
						height: 85rpx;
						background-color: #deecff;
						border-radius: 18rpx;
						input {
							height: 100%;
						}
						.userInputplaceholder {
							color: #70a5ed;
							font-weight: 700;
						}
					}
					
				}
				.resetPsd {
					display: flex;
					justify-content: end;
					color: rgb(48, 127, 254);
				}
				.btn_box {
					margin-top: 10rpx;
					padding: 10rpx 15rpx;
					
					.btnCla {
						background-color: rgb(48, 127, 254) !important;
						font-weight: 700;
						padding: 0 20rpx;
					}
					
					
					.u-wave-ripple {
						z-index: 0;
						position: absolute;
						border-radius: 100%;
						background-clip: padding-box;
						pointer-events: none;
						user-select: none;
						transform: scale(0);
						opacity: 1;
						transform-origin: center;
					}
				}
				.yy {
					display: flex;
					padding:20rpx 10rpx;
					font-size: 15px;
					text {
						
						color: rgb(48, 127, 254);
					}
				}
				
				
			}
			.goReg {
				padding: 10rpx 20rpx;
				color: #658fc1;
				font-size: 15px;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
